<?xml version='1.0' encoding='UTF-8' ?>
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml"
      xmlns:h="http://java.sun.com/jsf/html"
      xmlns:f="http://java.sun.com/jsf/core"
      xmlns:ui="http://java.sun.com/jsf/facelets"
      xmlns:p="http://primefaces.org/ui"
      xmlns:dm="http://java.sun.com/jsf/composite/dma">

    <h:body>
        <ui:composition template="./templates/template_home.xhtml">

            <ui:define name="resources">
                <script src="_js/jquery-1.7.1.js"/>
                <!--                kwicks{-->
                <script src="_js/kwicks/jquery.easing.1.3.js"></script>
                <script src="_js/kwicks/jquery.kwicks.min.js"></script>
                <style>
                    body { margin: 30px; }
                    .kwick1 { background: #53b388; }
                    .kwick2 { background: #5a69a9; }
                    .kwick3 { background: #c26468; }
                    .kwick4 { background: #bf7cc7; }

                    /* This css file serves as a template for styling your kwicks.  Feel free to modify, but please make note of the comments - some of them are important. */
                    .kwicks {
                        /* recommended styles for kwicks container */
                        list-style: none; /* if UL container is used */
                        position: relative;
                        margin: 0;
                        padding: 0;
                    }
                    .kwicks .kwick-panel {
                        /* these are required, but the values are up to you (must be pixel) */
                        width: 200px;
                        height: 310px;

                        /*do not change these */
                        display: block;
                        overflow: hidden;
                        cursor: pointer;
                        padding: 0; /* if you need padding, do so with an inner div (or implement your own box-model hack) */
                    }

                    .kwicks.horizontal .kwick-panel {
                        /* This is optional and will be disregarded by the script. However, it should be provided for non-JS enabled browsers. */
                        margin-right: 5px; /*Set to same as spacing option. */
                        float: left;
                    }
                    .kwicks.vertical .kwick-panel {
                        /* This is optional and will be disregarded by the script. However, it should be provided for non-JS enabled browsers. */
                        margin-bottom: 5px; /*Set to same as spacing option. */
                    }

                </style>
                <script>
                    $(function(){
                        $('#demo').kwicks({
                            // *** Appearance ***
                            max : 500, // The width or height of a fully expanded kwick element
                            min : null, // The width or height of a fully collapsed kwick element
                            spacing : 0, // The width (in pixels) separating each kwick element
                            isVertical : false, // Kwicks will align vertically if true
                            sticky : false, // One kwick will always be expanded if true
                            defaultKwick : 0, // The initially expanded kwick (if and only if sticky is true). zero based
                            activeClass : 'active', // Class added to active (open) kwick
                            // *** Interaction ***
                            event : 'mouseenter', // The event that triggers the expand effect
                            eventClose : 'mouseleave', // The event that triggers the collapse effect
                            // *** Functionality ***
                            duration : 500, // The number of milliseconds required for each animation to complete
                            easing : 'swing', // Custom animation easing (requires easing plugin if anything other than 'swing' or 'linear')
                            // *** Slideshow ***
                            showDuration : 2000, // Slideshow duration
                            showNext : 1, // set to 1 for left-to-right, -1 for right-to-left or 0 for a random slide
                            // *** Callbacks ***
                            initialized : function(kwick){}, // event called when kwicks has been initialized
                            init : function(kwick){}, // event called when the event occurs (click or mouseover)
                            expanding : function(kwick){}, // event called before kwicks expanding animation begins
                            collapsing : function(kwick){}, // event called before kwicks collapsing animation begins
                            completed : function(kwick){}, // event called when animation completes
                            playing : function(kwick){}, // event called when slideshow starts
                            paused : function(kwick){} // event called when slideshow ends
                        });
                    }); 
                </script>
                <!--                }kwicks-->

                <!--    fancybox{-->
                <script type="text/javascript" src="_js/fancybox/jquery.mousewheel-3.0.4.pack.js"></script>
                <script type="text/javascript" src="_js/fancybox/jquery.fancybox-1.3.4.js"></script>
                <link rel="stylesheet" type="text/css" href="_js/fancybox/jquery.fancybox-1.3.4.css" media="screen" />
                <script type="text/javascript">
                    function fa(){
                        $(".various").fancybox({
                            'width': '75%',
                            'height': '75%',
                            'autoScale': false,
                            'transitionIn': 'elastic',
                            'transitionOut': 'elastic',
                            'type': 'iframe',
                            'titlePosition': 'inside',
                            'onClosed': function() {
                                fa();
                            } 
                        });
                    }
                    $(document).ready(function() {
			
                        fa();

		
                    });
                </script>
                <!--    fancybox{-->
            </ui:define>

            <ui:define name="content">
                <div id="_left_container">
                    <!--
                                    <div id="_title">
                                        HOME
                                    </div>
                    -->


                    <div id="_title">
                        HOME
                    </div>

                    <div id="_carousel">
                        <div id="carousel">
                            <ul id="demo">
                                <li>
                                    <div class="kwicks_inner_inner">  ssssssssssssssssssssssssssssssssssssssss</div>
                                </li>
                                <li>fgf fg fg  gf </li>
                                <li> fgdfgd dfg df </li>
                                <li> fgfdg gf fd ffd</li>
                            </ul>
                        </div>
                    </div>

                    <div style="font-weight: bold;padding: 10px;">
                        Actualities/New Feeds
                    </div>

                    <div class="content_item">
                        <p> <span style="color: #820015;"> MA DJs at Sheraton hotel</span> 
                            DMA Djs are joining the resident band at Sheraton 
                            and will perform before the band, during band breaks
                            and after the band to continue the party until 2am 
                            (Every Friday and Saturday)</p>
                        <p style="text-align: right; padding-right: 10px;color: #820015;">                            
                            &raquo; detail                            
                        </p>
                    </div>

                    <div class="content_item">
                        <p> <span style="color: #820015;"> 
                                Dj Kenny &amp; Dj Hiwatts renew contract with Park Hyatt Saigon 
                            </span>
                            Dj Kenny is one of DMA most promising Dj after only 6 months 
                            of training he is resident Dj with Dj Hiwatts (DMA Teacher) at the
                            “2 Lam Son Bar”, one of the A-Class Bar in Ho Chi Minh City (Every 
                            Thursday, Friday and Saturday)
                        </p>
                        <p style="text-align: right; padding-right: 10px;color: #820015;">                            
                            &raquo; detail                          
                        </p>
                    </div>

                    <div class="content_item">
                        <p> <span style="color: #820015;"> 
                                Audition for “Lush” Club 
                            </span> 
                            DMA is looking for 2 Djs for a resident job at the famous “Lush” Club.
                            Contact us if you wish to join the audition first week of April
                        </p>
                        <p style="text-align: right; padding-right: 10px;color: #820015;">                            
                            &raquo; detail                            
                        </p>
                    </div>
                    <div style="display: none">
                        <p:lightBox>  
                            <h:outputLink value="http://vimeo.com/moogaloop.swf?clip_id=18079550">  
                                <img alt="" src="_js/nivo-slider/demo/images/toystory.jpg"/>
                            </h:outputLink>  

                            <f:facet name="inline">  
                                <p:media value="http://vimeo.com/moogaloop.swf?clip_id=18079550"  width="400" height="225"  player="flash"/>  
                            </f:facet>  
                        </p:lightBox>
                    </div>
                </div>

            </ui:define>
        </ui:composition>
    </h:body>
</html>

